<template>
	<view>
		<!-- 无商品提示 -->
		<view class="emptyGoods" v-if="!total && total === 0"> ——<text>暂无相关商品</text>—— </view>
		<!-- 商品信息项 -->
		<view v-for="item in goodsList" :key="item.cat_id" @click="goToDetails(item.goods_id)">
			<!-- 传入循环项item渲染该组件结构 -->
			<my-goods :goodsItem="item"></my-goods>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			queryObj: {
				query: '', // 查询关键词（楼层区、历史标签传递参数）
				cid: '', // 商品分类ID（分类页三级分类传递参数）
				pagenum: 1, // 默认请求第1页数据
				pagesize: 10 // 默认请求的每页数据为10条
			},
			goodsList: [],
			total: null
		}
	},
	onLoad(options) {
		// 转存导航跳转的路径参数到queryObj
		this.queryObj.query = options.query || ''
		this.queryObj.cid = options.cid || ''
		// 调用商品列表数据请求函数
		this.getGoodsList()
	},

	methods: {
		// 定义商品列表数据请求函数
		async getGoodsList(cb) {
			const { data } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
			// 只要数据请求完毕就按需调用cb回调函数（关闭下拉loading）
			cb && cb()
			// 请求成功则赋值，否则提示失败
			if (data.meta.status === 200) {
				// 融合数组实现上拉触底分页加载功能
				this.goodsList = [...this.goodsList, ...data.message.goods]
				this.total = data.message.total
			} else {
				uni.$showMsg('请求数据失败！')
			}
		},

		// 商品信息项导航跳转至商品详情页
		goToDetails(id) {
			uni.navigateTo({
				url: '/subGoods/details/details?goods_id=' + id
			})
		}
	},

	// 上拉触底加载数据
	onReachBottom() {
		if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
			// true表示无下一页数据
			uni.$showMsg('无更多数据')
		} else {
			// 加载新一页，修改请求参数
			this.queryObj.pagenum += 1
			// 调用数据请求函数
			this.getGoodsList()
		}
	},

	// 下拉刷新重置数据
	onPullDownRefresh() {
		// 重置数据
		this.queryObj.pagenum = 1
		this.total = 0
		this.goodsList = []
		// 重新发起请求，传入关闭下拉loading的回调
		this.getGoodsList(() => uni.stopPullDownRefresh())
	}
}
</script>

<style lang="scss">
.emptyGoods {
	padding: 10px 0;
	color: gray;
	text-align: center;
	text {
		padding: 0 10px;
	}
}
</style>
